<!-- name 属性用于给组件指定一个名称 -->
<script setup lang="ts" name="Computed">
// ref 设置基本数据类型和对象类型数据的响应式 reactive 只能定义对象类型数据的响应式
import { ref, computed } from 'vue';

let Xing = ref('za')
let Ming = ref('鑫海')

//区分 方法 和 计算属性 方法没有缓存 计算属性有缓存
//计算属性的缓存是通过 Vue 的响应式系统实现的。当计算属性首次计算时，它会存储计算的结果。
//如果之后没有其依赖的数据发生变化，计算属性会直接返回之前计算的结果，而不是重新执行计算过程。
//计算属性  这样写的full Name是只读不可更改的， 之所以它会变化是因为依赖的属性发上了变化
/* let fullName = computed(() => {
    return Xing.value.slice(0, 1).toUpperCase() + Xing.value.slice(1) + '---' + Ming.value
}) */
//下面这样写的full Name是可读可改的
let fullName = computed({
    get() {
        return Xing.value.slice(0, 1).toUpperCase() + Xing.value.slice(1) + '---' + Ming.value
    },
    set(val) {
        const [xing, ming] = val.split('-')
        console.log(xing);
        console.log(ming);
        Xing.value = xing
        Ming.value = ming

    }
})

function changeFullName() {
    // 当尝试设置 fullName 的值时，set 方法会被调用。 ， 上面是在定义一个计算属性 set
    fullName.value = 'li-si'
}
//方法
/* function fullNam() {
    return Xing.value.slice(0, 1).toUpperCase() + Xing.value.slice(1) + '---' + Ming.value
} */

</script>

<template>
    <div class="person">
        <h1>
            姓： <input type="text" v-model="Xing">
            <br>
            名： <input type="text" v-model="Ming">
            <br>
            <!-- 姓名：<span>{{ Xing }}-{{ Ming }}</span> -->
            姓名： {{ fullName }}
            <br>
            <input type="button" value="更改姓名" @click="changeFullName()">
        </h1>
    </div>
</template>

<style>
.person {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 20px;
    padding: 20px;
}
</style>
